<template>
	<zkView ref="zkView" v-slot:uContainer>
		<view class="container">
			<view class="search" @click="searchFocus()">
				<uni-search-bar class="searchInput" placeholder="您需要点儿什么..." clearButton="auto" cancelButton="none"
					:focus="false" />
			</view>
			<swiper class="rollingSwiper" circular :indicator-dots="false" :autoplay="true" :circular="true" :interval="30000"
				:duration="500" easing-function="linear">
				<swiper-item v-for="(item, index) in rollingList" :key="index">
					<view class="item" v-if="item" @click="accessQuick(item)">
						<image mode="aspectFill" :src="item.image||'/static/placeholder.png'"></image>
						<view v-if="item.btn_title&&item.page_path" class="btnTitle">
							<text>{{item.btn_title}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="group">
				<view class="new" v-if="newList&&newList.length">
					<view class="groupTitle">
						<view class="left">
							<text>新品上市</text>
						</view>
						<view class="right" @click="toNewList()">
							<text>更多</text>
							<uni-icons type="right" size="28rpx"></uni-icons>
						</view>
					</view>
					<view class="groupNew">
						<template v-for="newItem in newList" :key="newItem._id">
							<view v-if="newItem" class="newItem" @click="toDetail(newItem)">
								<view class="itemThumb">
									<image mode="aspectFill" :src="newItem.thumbs[0]||'/static/placeholder.png'"></image>
									<text>新品</text>
								</view>
								<view class="itemH1">
									<text class="name">{{newItem.name}}</text>
								</view>
								<view class="itemH2" v-if="newItem.tag">
									<template v-for="tag in newItem.tag.split(' ')" :key="tag">
										<text>{{tag}}</text>
									</template>
								</view>
								<view class="itemPrice">
									<view class="price">
										<text>￥</text>
										<rich-text :nodes="formatPrice(newItem.price_sale,2)" />
										<text>￥</text>
										<rich-text :nodes="formatPrice(newItem.price_original,1)" />
									</view>
									<view class="pop" @click.stop="openSpuPop(newItem)">
										<uni-icons type="plus-filled" size="40rpx"></uni-icons>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>
				<view class="seckill" v-if="seckillPro&&seckillPro._id">
					<view class="groupTitle">
						<view class="left">
							<text>限时抢购</text>
						</view>
					</view>
					<view class="groupSeckill" @click="toSeckillList">
						<image class="seckillBg" mode="aspectFill" src="@/static/home/seckill.png"></image>
						<view class="time">
							<text v-for="(t,i) in seckillTime" :key="i">{{t}}</text>
						</view>
					</view>
				</view>
				<view class="hot" v-if="hotList&&hotList.length">
					<view class="groupTitle">
						<view class="left">
							<text>热销推荐</text>
							<!-- <view class="time">
								<text v-for="(t,i) in seckillTime" :key="i">{{t}}</text>
							</view> -->
						</view>
						<view class="right" @click="toHotList()">
							<text>更多</text>
							<uni-icons type="right" size="28rpx"></uni-icons>
						</view>
					</view>
					<view class="groupHot">
						<template v-for="hotItem in hotList" :key="hotItem._id">
							<view v-if="hotItem" class="hotItem" @click="toDetail(hotItem)">
								<view class="itemThumb">
									<image mode="aspectFill" :src="hotItem.thumbs[0]||'/static/placeholder.png'"></image>
								</view>
								<view class="itemSide">
									<view class="itemH1">
										<text class="name">{{hotItem.name}}</text>
									</view>
									<view class="itemH2" v-if="hotItem.tag">
										<template v-for="tag in hotItem.tag.split(' ')" :key="tag">
											<text>{{tag}}</text>
										</template>
									</view>
									<view class="itemH3">
										<text>已售100+</text>
									</view>
									<view class="itemPrice">
										<view class="price">
											<text>￥</text>
											<rich-text :nodes="formatPrice(hotItem.price_sale,2)" />
											<text>￥</text>
											<rich-text :nodes="formatPrice(hotItem.price_original,1)" />
										</view>
										<view class="pop" @click.stop="openSpuPop(hotItem)">
											<uni-icons type="cart-filled" size="40rpx"></uni-icons>
										</view>
										<view class="buy" @click.stop="toDetail(hotItem)">
											<text>立即购买</text>
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>
				<view class="notice" v-if="notice._id" @click.stop="readNotice(notice._id)">
					<image v-if="notice.image" mode="aspectFill" :src="notice.image"></image>
					<uni-icons v-else type="notification" size="48rpx" color="#fff"></uni-icons>
					<text>{{notice.title}}</text>
					<uni-icons type="right" size="36rpx" color="#ee0c0c"></uni-icons>
				</view>
				<view class="noMore">
					<text>让家乡的味道飘向世界~</text>
				</view>

				<!-- <uni-fab ref="fab" horizontal="left" vertical="bottom" direction="horizontal" :pattern="pattern"
					:content="fabList" @trigger="trigger" @fabClick="fabClick" /> -->

			</view>
		</view>
	</zkView>
	<spuPopup ref="spuRef" @popupChange="spuPopupChange" @popupCart="toCart" @popupBooking="toBooking" />
	<loginPopup ref="loginRef" @loginChange="loginChange" @loginConfirm="loginConfirm" />
	<zkTabbar pageIndex="0" />
</template>

<script>
	import indexJs from './index.js';
	import mixins from '@/common/mixins.js';
	import loginPopup from '@/components/loginPopup/loginPopup.vue';
	import spuPopup from '@/components/spuPopup/spuPopup.vue';

	export default {
		components: {
			loginPopup,
			spuPopup
		},
		mixins: [mixins],
		...indexJs
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>